<template>
  <div class="home_page">
    <el-affix offset="0" >
   <div  class="lunbo">
    <el-carousel class="lunbow"  autoplay loop arrow="never" indicator-position="none">
      <el-carousel-item  >
      <img src="/public/login/nav1.jpg" style="height:100%" alt="">
      </el-carousel-item>
      <el-carousel-item >
        <img src="/public/login/nav2.jpg" style="width:100%" alt="">
    </el-carousel-item>
    </el-carousel>
    <div class="home_title">
          万枫酒店欢迎您   
    </div>
   </div>
   <div style="display: flex;justify-content: space-around;height:50px;line-height: 50px;background-color: white;">
      <span><img class="home_hongbao" src="/public/login/homehongbao.jpg" alt=""></span>
      <span class="home_green">满</span>
      <span class="home_red">￥500</span>
      <span class="home_green">减</span>
      <span class="home_red">￥50</span>
      <span class="home_green">|</span>
      <span class="home_green">微信专享</span>
      <span><button class="home_btn">立即领取</button></span>
      <span >&gt;</span>
    </div>
  </el-affix>
 

    <div style="width:100%;height:10px;background-color: #f0f4f9;">

    </div>
    <div class="home_nav">
        <div @click="router.push('/Home_libao')">
          <img src="/public/login/u207.jpg" alt="">
          <br>
          专享礼包
        </div>
        <div @click="router.push('/Home_qiaodao')">
          <img src="/public/login/u202.jpg" alt="">
          <br>
          每日签到
        </div>
        <div @click="router.push('/Home_youhuijuan')">
          <img src="/public/login/u209.jpg" alt="">
          <br>
          优惠卷
        </div>
        <div @click="router.push('/Home_my')">
          <img src="/public/login/u205.jpg" alt="">
          <br>
          我的订单
        </div>
        <div @click="router.push('/Home_shangcheng')">
          <img src="/public/login/u211.jpg" alt="">
          <br>
          积分商城
        </div>

    </div>
    <div style="width:100%;height:10px;background-color: #f0f4f9;">

</div>
<div style="text-align: center;color:#52caba;font-weight: 700;">——— &emsp; 猜你喜欢 &emsp; ———</div>
<div>
  <el-carousel style="height:100px;width:100%" type="card" autoplay loop arrow="never" indicator-position="none">
   
    <el-carousel-item   v-for="item in roomarr" :key="item._id" @click="router.push('/Home_type?id='+item._id)" >
    
      <div :style="{ backgroundImage: 'url(/public/login' + item.img + ')',backgroundSize:'cover',height:'100%',paddingTop:'66px' }">
        <div style="height:16%;background-color: white;opacity: 0.6;text-align: center;line-height:46px;">{{item.name}}</div>
      </div>
    </el-carousel-item>
  </el-carousel>
</div>
<div style="color:#52caba;font-weight: 700;" > &emsp; | 今日推荐 </div>
<div class="home_kuai" @click="router.push('/Home_type?id='+item._id)" v-for=" item in roomarr" :key="item._id">
<div class="kuai1"> <img :src='"/public/login"+item.img' alt=""></div>

<div  class="kuai2">
  <div>{{item.name}}</div>
  <div><button>舒适</button><button>地暖</button><button>温泉</button></div>
<div>￥ 589.00 </div>
<div class="kuai2_3">
  <div ><img style="height:32px;" src="/public/login/xingji.png" alt=""></div> <div> 推荐</div><button>预定</button>
</div>
</div>
</div>







  </div>
  
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted} from 'vue'
import './Home_page.css'
import { useRouter } from 'vue-router';
import request from '../../utils/request';
const roomarr = reactive([])
const router = useRouter()
const getroomarr = async ()=>{
   let {data} = await request.get('/roomtype')
   roomarr.push(...data.data)
}

onMounted(()=>{
  getroomarr()
})
</script>
<style  scoped>

</style>